import { columns, tableActiveKey } from "./store";
import { fetchList, handleAction } from ".";
export const tablePage = renderTablePage();
export const tableData = ref<any>([]);
export const tableLoading = ref(false);
const defineBodyCellMap = (number, { value, text, index, column, record }) => {
  const tradeDetailMap = {
    0: "tradeDetailApi.queryIncomeDetail",
    1: "tradeDetailApi.queryPayDetail",
  };
  const renderAction = () => (
    <div>
      {withDirectivePower({
        vNode: renderDetail.call({
          record,
          handleAction,
          identify: tradeDetailMap[number],
        }),
        bindingValue: tradeDetailMap[number],
      })}
    </div>
  );
  return new Map([
    [{ key: "index", state: /[01]/ }, renderIndex],
    [
      { key: "user_info", state: /[01]/ },
      renderUserInfo.bind({
        record: value,
        tableLoading,
      }),
    ],
    [{ key: "action", state: /[01]/ }, renderAction],
  ]);
};
const handleRenderBodyCellTask = (number, props) => {
  const array = [...defineBodyCellMap(number, props)].filter(
    ([object]) => object.key === props.column.key && object.state.test(number)
  );
  const _this = { number, tablePage, ...props };
  return array.map(([, value]) => value.call(_this));
};
export const tableConfig = () => {
  const defineTable = {
    pagination: tablePage,
    columns,
    dataSource: tableData,
    loading: tableLoading,
    on: {
      change(paging: { current: number; pageSize: number }) {
        tablePage.current = paging.current;
        tablePage.pageSize = paging.pageSize;
        fetchList();
      },
    },
    tableSlot: {
      bodyCell: (props) =>
        handleRenderBodyCellTask(tableActiveKey.value, props),
    },
  };
  return defineTable;
};
